import React from "react";
import './FindMusic.scss'
import { Tabs } from 'antd';
import Recommend from "../../components/Recommend/Recommend";
import PlaylistPage from "../../components/playlistPage/playlist";
import RankingListPage from "../../components/rankingList/rankingList";
import {SetIndexKey} from "../../store/action";
import { connect } from "react-redux";


const { TabPane } = Tabs;
const mapStateToProps = (state) => {
    return {
        state,
    };
}


const mapDispatchToProps = (dispatch) => {
    return {
        setKey: (key) => dispatch(SetIndexKey(key))
    }
}

class FindMusic extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            key: 0
        }
        this.callback = this.callback.bind(this)
    }

    componentDidMount() {
        const { IndexKey } = this.props.state;
        this.setState({
            key: IndexKey
        })
    }

    callback(value){

    }

    render() {

        return(
            <div className="FindMusic">
                <Tabs className="MusicTabs" defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="个性推荐" key="0">
                        <Recommend history={this.props.history}></Recommend>
                    </TabPane>
                    <TabPane tab="歌单" key="1">
                        <PlaylistPage />
                    </TabPane>
                    <TabPane tab="排行榜" key="2">
                        <RankingListPage />
                    </TabPane>
                    <TabPane tab="歌手" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="最新音乐" key="4">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(FindMusic);